<script setup lang="ts">
  import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger
  } from '@renderer/components/ui/dropdown-menu'
  import { Avatar, AvatarFallback, AvatarImage } from '@renderer/components/ui/avatar'
  import { useUserStore } from '@renderer/store/modules/user.store'

  const userStore = useUserStore()

  const logout = () => {
    userStore.logout()
  }
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Avatar class="rounded-full h-6 w-6">
        <AvatarImage :src="userStore.userInfo.avatar" :alt="userStore.userInfo.name" />
        <AvatarFallback class="rounded-lg"> CN </AvatarFallback>
      </Avatar>
    </DropdownMenuTrigger>
    <DropdownMenuContent
      class="rounded-lg min-w-56 w-[--reka-dropdown-menu-trigger-width]"
      align="center"
      :side-offset="10"
    >
      <DropdownMenuLabel class="font-normal p-0">
        <div class="text-sm px-1 py-1.5 text-left flex gap-2 items-center">
          <Avatar class="rounded-lg h-8 w-8">
            <AvatarImage :src="userStore.userInfo.avatar" :alt="userStore.userInfo.name" />
            <AvatarFallback class="rounded-lg"> CN </AvatarFallback>
          </Avatar>
          <div class="text-sm leading-tight text-left flex-1 grid">
            <span class="font-semibold truncate">{{ userStore.userInfo.name }}</span>
            <span class="text-xs truncate">{{ userStore.userInfo.email }}</span>
          </div>
        </div>
      </DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuGroup>
        <DropdownMenuItem>
          <i class="i-mynaui-sparkles"></i>
          Upgrade to Pro
        </DropdownMenuItem>
      </DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuGroup>
        <DropdownMenuItem>
          <i class="i-mynaui-user-circle"></i>
          Account
        </DropdownMenuItem>
        <DropdownMenuItem>
          <i class="i-mynaui-credit-card"></i>
          Billing
        </DropdownMenuItem>
        <DropdownMenuItem>
          <i class="i-mynaui-bell"></i>
          Notifications
        </DropdownMenuItem>
      </DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuItem class="cursor-pointer" @click="logout">
        <i class="i-mynaui-logout-solid"></i>
        Log out
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>
